<template >
<!--  学生学习情况模块-->
  <div class="bg">

  <div class="div1">
    <el-row :gutter="12">
      <el-col :span="8" >
        <el-card shadow="hover" > 姓名:{{$route.query.stuName}} </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover"> 班级:{{$route.query.claName}} </el-card>
      </el-col>

    </el-row>
  </div>
  <div class="div2">
    <el-row :gutter="12">

    <el-col :span="8">
      <el-statistic :value="count">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            已完成章节数/总课程章节数
          </div>
        </template>
        <template #suffix>/60</template>
      </el-statistic>
      完成进度
    </el-col>
      <el-col :span="8">
    <el-progress type="dashboard" :percentage="count">
      <template #default="{ percentage }">
        <span class="percentage-value">{{  Math.floor(percentage/60*100)}}%</span>
        <span class="percentage-label">完成率</span>
      </template>
    </el-progress>
      </el-col>
      <el-col :span="8">
        <div class="statistic-card">
          <el-statistic :value="1">
            <template #title>
              <div style="display: inline-flex; align-items: center">
               班级排名
                <el-tooltip
                    effect="dark"
                    content=""
                    placement="top"
                >
                  <el-icon style="margin-left: 4px" :size="12">
                    <Warning />
                  </el-icon>
                </el-tooltip>
              </div>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>than yesterday</span>
              <span class="green">
              24%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
  </div>
    <div class="div3" id="div3">
      <el-table :data="tableData"  style="width: 100%">
        <el-table-column label="序号" prop="courseId" width="80" />
        <el-table-column label="课程名" prop="title"  width="120" >
        </el-table-column>
        <el-table-column label="完成进度" prop="schedule"   width="500">

          <template #default="scope">
            <el-progress :percentage="scope.row.schedule" />
<!--            <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.schedule" />-->
          </template>
        </el-table-column>
        <el-table-column label="操作" width="500">
          <template #default="scope">
            <el-button type="success" size="small"  @click="dialogTableVisible = true,chapterSituation(scope)" >视频学习详情</el-button>
            <el-button type="success" size="small"  @click="dialogTableVisible2 = true,chapterSituationWork(scope)" >作业完成详情</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="dialogTableVisible2" title="学习情况" >
      <el-table :data="gridDataWork" class="eltable_img" style="position: unset">
        <el-table-column label="章节名称" prop="chaName" width="100"  />
        <el-table-column label="上传截图" prop="learnImg"  >
          <template #default="scope">
            <div class="demo-image__preview">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.learnImg"
                  @click="chakanImg(scope.row.learnImg)"
                  :preview-src-list="srcList"
                  :preview-teleported="true"
                  :hide-on-click-modal="true"
                  :zoom-rate="1.2"
                  :initial-index="4"
                  fit="cover"
              />
            </div>



<!--/*            <el-image style="width: 100px; height: 100px" :src="scope.row.learnImg" :fit="fill" />*/-->
          </template>
        </el-table-column>
        <el-table-column label="作业完成情况"    prop="accomplishFlag"  >
          <template #default="scope">
            <el-tag
                :type="scope.row.accomplishFlag === 0 ? 'primary' :(scope.row.accomplishFlag === 1 ? 'success' : 'danger')"
                disable-transitions>{{ scope.row.accomplishFlag === 0 ? '完成' : '未完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="updateTime" />
<!--        <el-table-column label="操作" width="100">-->
<!--          <template #default="scope">-->
<!--            <el-button type="success" size="small"  @click="watchImg(scope)" >查看截图</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->

      </el-table>
    </el-dialog>
    <el-dialog v-model="dialogTableVisible" title="学习情况">
      <el-table :data="gridData">
        <el-table-column label="章节名称" prop="chaName" />

        <el-table-column label="完成情况" prop="accomplishFlag"  >
          <template #default="scope">
            <el-tag
                :type="scope.row.accomplishFlag === 0 ? 'primary' :(scope.row.accomplishFlag === 1 ? 'success' : 'danger')"
                disable-transitions>{{ scope.row.accomplishFlag === 1 ? '完成' : '未完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="updateTime" />

      </el-table>
    </el-dialog>

<!--    <el-dialog v-model="dialogTableVisible" title="图片查看">-->
<!--      <el-image style="width: 100px; height: 100px" :src="scope.row.learnImg" :fit="fill" />-->
<!--    </el-dialog>-->

  </div>

</template>

<script>
import {ref} from "vue";

export default {
  name: "LearningMonitoring",
  data(){
    return{
      srcList : [],
      courseTitle:'',
      dialogTableVisible : ref(false),
      tableData: [],
      gridData:[],
      gridDataWork:[],
      dialogTableVisible2 : ref(false),
      count:0,



    }

  },
  watch: {
    '$route': "courseList",
  },

  mounted() {
    this.courseList()
  },
  methods:{
    watchImg(){

    },
    chakanImg(learnImg){
      this.srcList=[]
      this.srcList.push(learnImg)

    },

    //作业完成情况
    chapterSituationWork(scope){
      let _this=this
      // console.log("接受学生num",_this.$route.query.stuNum)
      let stuNum = _this.$route.query.stuNum
      let courseId=scope.row.courseId

      this.chapterWork(courseId,stuNum)
    },
    chapterWork(courseId,stuNum){
      let _this = this;
      let familys=[];
      let url = "/studyadmin/course/StuSituationWork";
      // console.log("服务端返回的章节数据为:",courseId);
      _this.$axios.get(url,{params: {courseId: courseId,stuNum:stuNum}}).then(function(serverData){
        let state=''
        if(serverData.data.code===0){
          let chapterList = serverData.data.data;
          // console.log("服务端返回的章节学习数据为======:",chapterList);
          familys=chapterList
          _this.gridDataWork=familys
          // console.log("======sahdgasjhdgasjgdjhas=====",familys)
        }

      }).catch(function(error){
        console.log("异步请求发生了错误:",error);
      })


    },

    chapterSituation(scope){
      let _this=this
      console.log("接受学生num",_this.$route.query.stuNum)
      let stuNum = _this.$route.query.stuNum
      let courseId=scope.row.courseId

      this.chapterList(courseId,stuNum)
    },
    courseList(){

      let _this = this;
     //学习情况
     //  console.log("接受学生num",_this.$route.query.stuNum)
      let stuNum=_this.$route.query.stuNum;
      // let url2 = "/studyadmin/course/courseList";
      // _this.$axios.post(url,{params:{stuNum:stuNum}}).then(function(serverData) {
      //   console.log("服务端返回的kecheng 数据为:", serverData);
      //   if (serverData.data.code === 0) {
      //
      //   }
      // })
      //课程数据
      let url = "/studyadmin/course/StuSchedule";
      _this.$axios.get(url,{params:{stuNum:stuNum}}).then(function(serverData){
        console.log("服务端返回的课程============ 数据为:",serverData);
        if(serverData.data.code===0){
          // let courseList = ;
          _this.tableData=serverData.data.data
          _this.count=serverData.data.count
        }
      }).catch(function(error){
        console.log("异步请求发生了错误:",error);
      })
    },
    //课程章节
    chapterList(courseId,stuNum){
      let _this = this;
      let familys=[];
      let url = "/studyadmin/course/StuSituation";
      _this.$axios.get(url,{params: {courseId: courseId,stuNum:stuNum}}).then(function(serverData){
        if(serverData.data.code===0){
          let chapterList = serverData.data.data;
          // console.log("服务端返回的章节学习数据为======:",chapterList);
          familys=chapterList
          _this.gridData=familys
        }

      }).catch(function(error){
        console.log("异步请求发生了错误:",error);
      })


    },

  }
}
</script>

<style scoped>

.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.bg{
  /*background-color: #e6e6ec;*/
}
.div1{

  margin-left: 20px;
}

.div2{

  margin-top: 30px;
  margin-left: 20px;
  /*background-color: #cdcfe8;*/
}


:global(h2#card-usage ~ .example .example-showcase) {
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

.statistic-card {
  height: 100%;
  padding: 20px;
  border-radius: 4px;
  background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--el-text-color-regular);
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  color: var(--el-color-success);
}
.red {
  color: var(--el-color-error);
}

</style>
